//
//  locationDetailView.swift
//  map
//
//  Created by Aoyun on 23/01/2025.
//

import MapKit
import SwiftUI

struct locationDetailView: View {
    @Environment(LocationViewModel.self) private var vm
    let location: Location
    var body: some View {
        ScrollView {
            imageSetion.shadow(color: .black.opacity(0.3), radius: 20, x: 0, y: 10)
            contentSetion
            mapSection
        }
        .ignoresSafeArea()
        .background(.ultraThinMaterial)
        .overlay(alignment: .topLeading, content: {
            btnSection
        })
    }
}

#Preview {
    locationDetailView(location: LocationsDataService.locations.first!).environment(LocationViewModel())
}

extension locationDetailView {
    private var imageSetion: some View {
        VStack {
            TabView {
                ForEach(location.imageNames, id: \.self) {
                    Image($0)
                        .resizable()
                        .scaledToFill()
                    // UIDevice.current.userInterfaceIdiom 机型
                    // UIScreen.main.bounds.width 屏幕等宽
                        .frame(maxWidth: UIDevice.current.userInterfaceIdiom == .pad ? nil: UIScreen.main.bounds.width)
                        .clipped()
                }
            }.tabViewStyle(.page)
                .frame(height: 500)
        }
    }

    private var contentSetion: some View {
        VStack(alignment: .leading, spacing: 16) {
            VStack(alignment: .leading, spacing: 8) {
                Text(location.name)
                // 大标题
                    .font(.largeTitle)
                    .fontWeight(.semibold)
                Text(location.cityName)
                // h3
                    .font(.title3)
                    .foregroundColor(.secondary)
                // 分割线（相当于br）
                Divider()
                Text(location.description)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                // URL(string:) 把string变成url
                if let url = URL(string: location.link) {
                    Link("Read more about citys message on Link", destination: url)
                        .font(.headline)
                        .tint(.blue)
                }
                Divider()
            }
        }.frame(maxWidth: .infinity, alignment: .leading)
            .padding()
    }

    private var mapSection: some View {
        VStack {
            Map(initialPosition: MapCameraPosition.region(
                MKCoordinateRegion(center: location.coordinates, span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))
            )) {
                Marker(coordinate: location.coordinates, label: {
                    locationIconView()
                })
            }
        }
        // 禁止触摸事件（touch）
        .allowsHitTesting(false)
        // 视图宽高比1:1 按比例缩放
        .aspectRatio(1, contentMode: .fit)
        .cornerRadius(30)
    }

    private var btnSection: some View {
        VStack {
            Button(action: {
                vm.showLocationDetail = nil
            }, label: {
                Image(systemName: "xmark")
                    .font(.headline)
                    .padding(16)
                    .foregroundColor(.primary)
                    .background(.thickMaterial)
                    .cornerRadius(10)
                    .shadow(radius: 4)
                    .padding()
            })
        }
    }
}
